<script setup lang="ts">
import { useRouter } from 'vue-router';
import { showDialog, showToast } from 'vant';

defineProps<{ msg: string }>();
const router = useRouter();

const images = ref([
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);

const num = ref();

function btnEv() {
  showDialog({
    message: 'click',
  }).then(() => {
    showToast('toast');
  });
}

function navigateEv(path: string) {
  router.push({ path: path });
}
</script>

<template>
  <van-swipe class="swiper" :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" class="img" />
    </van-swipe-item>
  </van-swipe>

  <h1>{{ msg }}</h1>
  <van-cell-group inset>
    <van-field v-model="num" type="digit" label="整数" placeholder="请输入" />
  </van-cell-group>

  <div class="lr-padding">
    <van-button type="danger" size="small" @click="btnEv">弹窗</van-button>
    <van-button size="small" @click="navigateEv('login')">登录</van-button>
    <van-button type="primary" size="small" @click="navigateEv('404')">404</van-button>
    <van-button type="primary" size="small" @click="navigateEv('list')">列表</van-button>
  </div>
</template>

<style scoped lang="scss">
h1 {
  color: $text;
  background-color: $main;
  padding: 10px;
}
.swiper {
  height: 300px;
  .img {
    width: 100%;
  }
}
</style>
